<template>
  <div class="plan">
    <!-- 项目筛选 -->
    <scroll-view class="project-box" scroll-x="true">
      <div class="tabs">
        <div
          v-for="(item, index) in projectList"
          :key="item.id"
          :class="['tabs-items', isActive === index ? 'active' : ' ']"
          @click="projectChange(index)"
        >
          {{ item.projectName }}
        </div>
      </div>
    </scroll-view>
    <div class="table">
      <div class="tr">
        <div class="th">任务名称</div>
        <div class="th">开始时间</div>
        <div class="th">
          <div>任务状态 <span class="task-point"></span></div>
          <div>方案状态 <span class="plan-point"></span></div>
        </div>
        <div class="th">
          <div>方案</div>
          <div>领料单</div>
        </div>
      </div>
      <scroll-view class="task" scroll-y="true" @scrolltolower="loadMoreTasks">
        <div class="tr" v-for="task in taskList" :key="task.id">
          <div class="td">{{ task.taskName }}</div>
          <div class="td">
            {{ task.rstartDate }}
          </div>

          <div class="td">
            <van-tag type="success" v-if="task.status === '0'">未开始</van-tag>
            <van-tag type="success" v-if="task.status === '1'">进行中</van-tag>
            <van-tag type="success" v-if="task.status === '2'"
              >按期完成</van-tag
            >
            <van-tag type="success" v-if="task.status === '3'"
              >提前完成</van-tag
            >
            <van-tag type="success" v-if="task.status === '4'"
              >延期完成</van-tag
            >
            <van-tag
              style="margin-top: 4rpx"
              type="warning"
              v-if="task.materialStatus === 0"
              >未确认</van-tag
            >
            <van-tag
              style="margin-top: 4rpx"
              type="warning"
              v-if="task.materialStatus === 1"
              >已确认</van-tag
            >
          </div>
          <div class="td">
            <text
              class="plan-btn"
              @click="goPlanInfo(task.id, task.taskSchemeId, 'sure')"
              v-if="task.materialStatus === 0"
              >确认</text
            >
            <text
              class="plan-btn"
              @click="goPlanInfo(task.id, task.taskSchemeId, 'look')"
              v-else
              >查看</text
            >
          </div>
        </div>
        <div v-if="isLoadingMore" class="loading">加载中...</div>
        <div v-else-if="pageNo > total" class="no-more">没有更多数据了</div>
      </scroll-view>
    </div>
  </div>
</template>

<!-- /**
 * materialStatus 方案状态
 * status 任务状态
 */ -->
<script setup>
import moment from 'moment'
import { ref, onMounted } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { allPlanData, projectItemInfo } from '../../api/plan'

// 项目列表
const projectList = ref([])
// 任务列表
const taskList = ref([])
// 当前页码
const pageNo = ref(1)
// 每页显示的数量
const pageSize = ref(15)
// 总页数
const total = ref(1)
// 是否正在加载更多
const isLoadingMore = ref(false)
//根据项目ID去查项目对应的任务
const findProjectInfo = async (projectId, page, pageSize) => {
  const projectItemTreeInfo = await projectItemInfo(projectId, page, pageSize)
  if (projectItemTreeInfo.code === 200) {
    projectItemTreeInfo.data.list.forEach((item) => {
      item.rstartDate = item.rstartDate
        ? moment(item.rstartDate).format('YYYY-MM-DD')
        : '-'
    })
    taskList.value = projectItemTreeInfo.data.list
    total.value = projectItemTreeInfo.data.total
  }
}
// 获取所有信息
const getAllInfo = async () => {
  const res = await allPlanData()
  if (res[0].code === 200) {
    projectList.value = res[0].data
    // 默认查第一个项目id对应的任务
    findProjectInfo(res[0].data[0].projectId, pageNo.value, pageSize.value)
  }
}

// 加载更多任务
const loadMoreTasks = async () => {
  if (isLoadingMore.value || pageNo.value * pageSize.value >= total.value)
    return
  isLoadingMore.value = true
  pageNo.value += 1
  const projectItemTreeInfo = await projectItemInfo(
    projectId.value,
    pageNo.value,
    pageSize.value
  )
  if (projectItemTreeInfo.code === 200 && projectItemTreeInfo.data?.list) {
    taskList.value = [...taskList.value, ...projectItemTreeInfo.data.list]
  }
  isLoadingMore.value = false
}

// 项目切换
const isActive = ref(0)
const projectId = ref('')
const projectChange = async (index) => {
  isActive.value = index
  pageNo.value = 1
  projectId.value = projectList.value[index].projectId
  findProjectInfo(projectId.value, pageNo.value, pageSize.value)
}

// 下拉刷新
onPullDownRefresh(() => {
  pageNo.value = 1
  isActive.value = 0
  try {
    getAllInfo()
  } finally {
    uni.stopPullDownRefresh()
  }
})
// 查看方案/确认方案
const goPlanInfo = (id, taskSchemeId, val) => {
  //未确认状态下
  if (val === 'sure') {
    uni.navigateTo({
      url:
        '/modules/planInfo/pages/index?id=' +
        id +
        '&taskSchemeId=' +
        taskSchemeId +
        '&val=' +
        val,
    })
  } else {
    uni.navigateTo({
      url:
        '/modules/planInfo/pages/index?id=' +
        id +
        '&taskSchemeId=' +
        taskSchemeId +
        '&val=' +
        val,
    })
  }
}

onMounted(() => {
  getAllInfo()
})
</script>

<style scoped lang="scss">
.plan {
  padding: $uni-space-default-20;
  position: relative;
  height: 100vh;
  box-sizing: border-box;
  .project-box {
    margin-top: $uni-space-default-20;
    .tabs {
      white-space: nowrap;
      box-sizing: border-box;
      .tabs-items {
        width: 200rpx;
        padding: 15rpx;
        display: inline-block;
        text-align: center;
        border: 1px solid $uni-bg-color-default;
        border-right: none;
        font-size: $uni-font-size-24-rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: $uni-text-color;
        box-sizing: border-box;
      }
      .tabs-items:last-child {
        border-right: 1px solid $uni-bg-color-default;
      }
      .active {
        background-color: $uni-bg-color-default;
        color: white;
      }
    }
  }

  .table {
    display: flex;
    flex-direction: column;
    margin-top: $uni-space-default-20;

    .tr {
      display: flex;
      flex-direction: row;

      .th,
      .td {
        text-align: center;
        border-top: 1px solid $uni-border-color;
        border-left: 1px solid $uni-border-color;
      }

      .th {
        font-weight: bold;
        font-size: $uni-font-size-24-rpx;
        padding: 10rpx $uni-space-default-10;
        background-color: #b3ccf4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .th:nth-child(1) {
        width: 35%;
      }
      .th:nth-child(2) {
        width: 25%;
      }
      .th:nth-child(3) {
        width: 25%;
      }
      .th:nth-child(4) {
        width: 15%;
      }

      .td {
        padding: 10rpx $uni-space-default-10;
        font-size: $uni-font-size-24-rpx;
        white-space: normal;
        word-break: break-all;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .td:nth-child(1) {
        width: 35%;
      }
      .td:nth-child(2) {
        width: 25%;
      }
      .td:nth-child(3) {
        width: 25%;
      }
      .td:nth-child(4) {
        width: 15%;
      }

      .td:last-child {
        border-right: 1px solid $uni-border-color;
      }

      .plan-btn {
        color: $uni-bg-color-default;
      }

      .plan-btn-left {
        margin-right: 10rpx;
      }

      .plan-btn-right {
        margin-left: 10rpx;
      }
    }

    .tr:last-child {
      .td {
        border-bottom: 1px solid $uni-border-color;
      }
    }
    .task {
      height: 78vh;
      -webkit-overflow-scrolling: touch;
    }
  }
}
.task-point {
  width: 20rpx;
  height: 20rpx;
  display: inline-block;
  background-color: var(--tag-success-color, #07c160);
  margin-left: 4rpx;
}
.plan-point {
  width: 20rpx;
  height: 20rpx;
  display: inline-block;
  background-color: var(--tag-warning-color, #ff976a);
  margin-left: 4rpx;
}
.loading,
.no-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
}
</style>
